<template>
  <div>
      <div class="menu container">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
        >

          <el-menu-item ><router-link to="/home/course/vip_zone" :class="route.path.includes('vip_zone')? 'active':''" class="router_link">会员专区</router-link></el-menu-item>
          <el-menu-item ><router-link to="/home/course/video_courses" :class="route.path.includes('video_courses')? 'active':''" class="router_link">视频课</router-link></el-menu-item>
          <el-menu-item ><router-link to="/home/course/live_courses" :class="route.path.includes('live_courses')? 'active':''" class="router_link">直播课</router-link></el-menu-item>
          <el-menu-item ><router-link to="/home/course/major_courses" :class="route.path.includes('major_courses')? 'active':''" class="router_link">线下课</router-link></el-menu-item>
          <el-menu-item ><router-link to="/home/course/zone_list" :class="route.path.includes('zone_list')? 'active':''" class="router_link">主题</router-link></el-menu-item>
        </el-menu>
      </div>
      <el-dialog v-model="userStore.showModel" title="温馨提示" width="30%" :before-close="handleClose">
			<div class="tip">临时用户请先<el-button @click="toLogin" size="small" type="primary" :icon="Key">登录</el-button></div>
		</el-dialog>
    <router-view> </router-view>
  </div>
</template>

<script setup lang="ts">
import { Key } from '@element-plus/icons-vue';
import { useUserInfoStore } from '@/stores/userInfo';
import { useRouter,useRoute } from 'vue-router';
import {  ref } from "vue";
const route=useRoute();
const router = useRouter();
const activeIndex = ref("0");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const userStore = useUserInfoStore()
const handleClose = ()=>{
  userStore.showModel = false
}
//登录
const toLogin = () => {
	router.push('/login?redirect='+userStore.route || route.path)
	userStore.showModel = false
	userStore.route = ''
}
</script>

<style scoped>
    .container {

  margin: 0 auto;
  display: block;
  clear: both;
}
.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 80px;
  font-size: larger;
  text-decoration: none;
  background-color: #f5f7f9!important;

}
.el-menu--horizontal{
  width: 1200px;
  justify-content: center;
    border: 0;
}
.router_link{
    text-decoration: none;
    font-size: 20px;
    color: black;
}
.el-card__body {
    margin-top: 30px;
}
.el-menu--horizontal>.el-menu-item {
  border-bottom: 0;
}
.active {
  border-bottom: 2px solid black;
}
.el-menu--horizontal>.el-menu-item a, .el-menu--horizontal>.el-menu-item a:hover {
    color: black;
}

</style>

